<template>
  <view class="bg-white rounded-md mb-2 p-4">
    <view class="flex justify-start items-center mb-2">
      <view class="mr-2">
        <wd-img :src="data?.avatarUrl" width="45" height="45" round />
      </view>
      <view class="flex flex-col">
        <view><wd-text :text="data?.username"></wd-text></view>
        <view><wd-text :text="formatDate(data?.createdTime)"></wd-text></view>
      </view>
    </view>
    <view class="mb-2">
      <wd-text :text="data?.content"></wd-text>
    </view>
    <view v-if="data?.imageUrl" class="flex gap-1 mb-2 justify-center">
      <view v-for="(image, index) in formatTag(data?.imageUrl)" :key="index">
        <wd-img :width="110" :height="110" :src="image" />
      </view>
    </view>
    <view class="mb-2">
      <wd-tag
        v-for="str in formatTag(data?.tag)"
        :key="str"
        custom-class="space"
        type="success"
        round
      >
        {{ str }}
      </wd-tag>
    </view>
    <wd-gap bg-color="#FFFFFF"></wd-gap>
    <wd-divider></wd-divider>
    <wd-gap bg-color="#FFFFFF"></wd-gap>
  </view>
</template>

<script lang="ts" setup>
import { getOnePostAPI, PostVO } from '@/service/post/post'
import { formatDate } from '@/utils/date'
import { formatTag } from '@/utils/string'

// const loading = ref(true)
const data = ref<PostVO>({})
onLoad(async (options) => {
  try {
    const res = await getOnePostAPI(options.id)
    data.value = res.result
  } catch (error) {
    console.error('Error fetching route data:', error)
    // 错误处理
  }
})
</script>

<style lang="scss" scoped></style>
